<template>
    <div>
        <van-nav-bar class="navBar" title="批次发放" left-text="返回" left-arrow @click-left="onClickLeft" fixed/>
        <el-container v-loading="loading" direction="vertical" class="mainWrap fixedMain">
            <el-main>
                <el-row  gutter="10">
                    <el-col span="24" class="elCol">
                        <div class="cardCoupon cardCoupon1">
                            <div class="leftSide">
                                <h3 class="h3">宴会卷</h3>
                            </div>
                            <div class="rightSide" @click="toBanquetCoupons(returnQuota,1)">
                                去发券
                            </div>
                        </div>
                    </el-col>
                    <el-col span="24" class="elCol">
                        <div class="cardCoupon cardCoupon1">
                            <div class="leftSide">
                                <h3 class="h3">纸质卷</h3>
                            </div>
                            <div class="rightSide" @click="toBanquetCoupons(returnQuota,2)">
                                去发券
                            </div>
                        </div>
                    </el-col>
                    <el-col span="24" class="elCol">
                        <div class="cardCoupon cardCoupon1">
                            <div class="leftSide">
                                <h3 class="h3">动态卷</h3>
                            </div>
                            <div class="rightSide" @click="toDynamicCoupons">
                                去发券
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            couponList:{},
            returnQuota:{}
        }
    },
    created() {
        this.couponList = this.$route.query.couponList
        this.returnQuota = this.$route.query.returnQuota
    },
    methods: {
        //返回
        onClickLeft(){
            this.$router.go(-1)
        },
        toBanquetCoupons(item,type){
            this.$router.push({
                path:"/banquetCoupons",
                query:{
                    /* quotaList:JSON.stringify(this.couponList),
                    quotaInfo:item, */
                    type:type
                }
            })
        },
        toDynamicCoupons(){
            //debugger
            this.$router.push({
                path:"/dynamicCoupons",
                query:{
                    quotaInfo:JSON.stringify(this.couponList)
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
    .elMain{            
        width: 93%;
        margin: 3px auto 20px;
        padding: 10px 0;
        background: #fff;
        border-radius: 5px;
        box-sizing: border-box;
        /deep/ .gridGroup{
            .van-grid-item__icon {
                font-size: 1rem;
            }
            .van-grid-item__text{
                font-size: .3rem;
                font-weight: 600;
                text-align: center;
            }
            .van-grid-item__content{
                padding: 10px 8px;
            }
        }
    }
    .elCol{
        margin-bottom: .1rem;
    }
    .cardCoupon{
        display: flex;
        height: 2rem;
        color: #fff;
        background: url('../../../assets/images/business/coupons/couponBg.png') center no-repeat;
        background-size: 100% 100%;
        border-radius: .1rem;
        &.cardCoupon1{
            background: url('../../../assets/images/business/coupons/couponBg1.png') center no-repeat;
            background-size: 100% 100%;
        }
        .leftSide{
            display: flex;
            flex:1;
            padding-left: .2rem;
            flex-direction:column;
            justify-content:space-around;
            .h3{
                font-size: 0.4rem;
                text-align: center;
            }
            .p1{
                font-size: .25rem;
                color:#F7F55A;
                text-align: center;
            }
        }
        .rightSide{
            display: flex;
            width: 1.9rem;
            font-size: .25rem;
            flex-direction:column;
            justify-content: center;
            align-items: center;
        }
    }
</style>
